
<template>
  <div id="visual">
    <div class="visual-app">
      <header>
        <topComponent name="榆林市公共资源交易平台数字见证大厅" @click.native="$router.push({ path: '/ksh' })"></topComponent>
        <div class="goback" @click.prevent="$router.push({ path: '/DP2' })">返回</div>
        <div class="header_button">
          <el-radio-group v-model="tabPosition" @change="handleTabsChange">
            <el-radio-button label="xmry">项目人员</el-radio-button>
            <el-radio-button label="gzry">工作人员</el-radio-button>
          </el-radio-group>
          <div class="font16">
            <span>{{ form.projectName }}</span>
            <span style="margin-left: 10px">{{ form.pbkstime }}</span>
          </div>
          <div>
            <!-- <span>{{ tcData.pbfloorname }}层</span> -->
          </div>
        </div>
      </header>
      <section>
        <div>
          <div class="left_menu">
            <div>
              <el-date-picker style="width: 100%" v-model="form.time" type="datetimerange" range-separator="至"
                              start-placeholder="开始日期" :picker-options="pickerOptions" @change="handTimeChange"
                              end-placeholder="结束日期"></el-date-picker>
              <div class="left_menu_buttons">
                <el-button type="primary" size="mini" :disabled="historyButtonDis !== '历史'" @click="handleSubmit"
                          >查询历史项目</el-button>
                <el-button type="primary" size="mini" @click="handleSubmitCls">清空</el-button>

                <el-button v-if="tabPosition === 'gzry'" @click="handleSelt('十楼')" type="primary" size="mini" label="十楼">10楼</el-button>
                <el-button v-if="tabPosition === 'gzry'" @click="handleSelt('十二楼')" type="primary"  size="mini" label="十二楼">12楼</el-button>
              </div>
              <!-- <button class="jfbutton" @click.prevent="handleSubmit"></button>
              <button class="jfbutton" @click.prevent="handleSubmitCls"></button> -->
            </div>
            <!-- 工作人员 -->
            <div v-if="tabPosition == 'gzry'">
              <ul class="left_menu_ul">
                <el-scrollbar style="height: 100%;">
                  <li class="gzry" v-for="(item, index) in listMenu" :key="index"
                      :class="{ activePer: item.xuanzhong }" @click="handleClickCurPerGZRY(item, index)">
                    <div>{{ peopList[item.personType] }}</div>
                    <div>
                      <touimgComponent :src="item.pic" />
                    </div>
                    <div style="position: relative">
                      <p>{{ item.personName }}</p>
                      <p>{{ item.cardId }}</p>
                      <div :style="{ background: item.HexString }" class="cirBiao"></div>
                    </div>
                  </li>
                </el-scrollbar>
              </ul>
            </div>
            <div v-if="tabPosition == 'xmry'">
              <ul style="margin-top: 10px;">
                <li class="popoverli"><span> 序号</span>
                  <p style="text-align: center;width: 100%;">项目名称</p>
                </li>
              </ul>
              <ul class="left_menu_ul">
                <el-scrollbar style="height: 100%;">
                  <el-collapse accordion v-model="activeCollapseValues" @change="handleCollapseChange " ref="collapse">
                    <el-collapse-item v-for="(item, index) in siteDataList" :key="index" :name="index">
                      <template slot="title">
                        <el-tooltip class="item" effect="dark" :content="item.name" placement="right">
                          <div class="site"> <span>{{ index + 1 }}</span> <span class="text-overflow">{{ item.name }}</span></div>
                         </el-tooltip>
                      </template>
                      <li v-for="(item, index) in activePersonList" :key="index"
                          :class="{ activePer: item.xuanzhong }" @click="handleClickCurPer(item, index)">
                        <div>{{ peopList[item.personType] }}</div>
                        <div>
                          <touimgComponent :src="item.pic" />
                        </div>
                        <div style="position: relative">
                          <p>{{ item.personName }}</p>
                          <p>{{ item.cardId }}</p>
                          <div :style="{ background: item.HexString }" class="cirBiao"></div>
                        </div>
                      </li>
                    </el-collapse-item>
                  </el-collapse>
                </el-scrollbar>
              </ul>
            </div>
          </div>
        </div>
        <main>
          <proViewComponent :status="trajectoryStatus"  :xmName="form.projectName" ref="proView" />
        </main>
      </section>
    </div>
  </div>
</template>

<script>
import { dvListPerson, dvListTrack, listPersonByTrack,dvListBidInfo } from "@/api/pageViewBig";
import topComponent from "@/components/top";
import proViewComponent from "./proViewComponent.vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn"; // 引入中文语言包
import { peopList } from "@/views/witness/components/Object3D/canvas/const";
import touimgComponent from "@/views/witness/components/Object3D/touimgComponent.vue";
import * as THREE from "three";

export default {
  components: { proViewComponent, topComponent, touimgComponent },
  data() {
    return {
      siteDataList: [], // 项目列表
      activeCollapseIndex:null,// 当前项目索引
      activeCollapseItem:{}, //当前项目
      activePersonList:[], // 当前项目人员
      activePerIndex: null,
      activeCollapseValues:[],
      tcData: {},
      historyButtonDis: '实时',
      touxianglist: [],
      checkboxlouceng:'',
      form: {
        time: [],
        startTime:'',
        endTime:'',
        floorName:'十楼'
      },
      pickerOptions: {
        disabledDate: (time) => {
          // 选取前三个月数据
          let threeDate = new Date();
          threeDate.setMonth(threeDate.getMonth() - 3);
          return time.getTime() < threeDate.getTime() || time.getTime() > new Date().getTime();
        }
      },
      tabPosition: "xmry",
      peopList,
      tabName: "",
      listMenu: [], //工作人员列表
      arrColor: [],
      trajectoryStatus: false, // 实时还是历史
      subscribedUrlArr: [], //订阅的主题
      siteListActiveName: 0, // 项目列表展开状态
    };
  },
  props: {

  },
  watch: {
    //   handler(newVal, oldVal) {
    //     if (newVal == "center") {
    //       this.getSiteDataHandle()
    //     }
    //   },
    //   immediate: true
    // },
    wsData: {
      handler(newVal) {
        if (newVal) {
          if(this.$refs.proView){
            this.$refs['proView'].addProViewData(newVal)
          }
        }
      },
      immediate: true
    },
  },
  computed: {
    wsData() {
      return this.$websocket.getters.wsData;
    }
  },
  async created() {
    //  初始化
    const { projectId, bidId, pbkstime, personId, projectName, tabName,pbjstime } = this.$route.query;

    this.resetTime()
   const result = await this.getDvListBidInfo()
   if(result.length >0){
    this.activeCollapseValues = 0
     this.handleCollapseChange(0)
     this.webSocketTaskFn()
   }
  
    
   
  },
  methods: {
 
    // 切换项目
    async handleCollapseChange(val){
    if(val ==='') return // 合住操作
     // 如果是今日项目 删除之前的订阅
      this.subscribedUrlArr.forEach(url=>{
        if(url){
          this.$websocket.dispatch("websocket_unsubscribe", url);
        }
      })
      this.subscribedUrlArr = []
      
      
      this.$refs.proView.clearCanvas()
      const activeCollapseItem  = this.siteDataList[val]
         this.$refs["proView"].handleTabsLouceng(activeCollapseItem.pbfloorname);
      const colors = this.generateColors(activeCollapseItem.personList.length);
      const arrColor = Array.from(colors);
     
      
      const personList =  activeCollapseItem.personList.map((item,index)=>{
        const color = arrColor[index]
        return{
          ...item,
          color,
          HexString:"#" + color.getHexString(),
          xuanzhong:true
        }
      })
      this.activeCollapseItem = activeCollapseItem
      this.activePersonList = personList
      if( activeCollapseItem.personList.length <=0)return
      const guijiList = await this.handleGetGUIAll()
      this.$refs["proView"].handleLineAll(guijiList, arrColor);
         // 如果是历史项目
      if(this.historyButtonDis === '历史'){
        this.trajectoryStatus = true
      }
      if(this.historyButtonDis === '实时' ){
        this.$refs["proView"].handleLine();
        this.webSocketTaskFn()
      }
    },
    // 添加人员不要删
   async addPeople({personName,personSex,idNo,facePic,bidId,cardId,personId,personType}){
     const color =  Array.from(this.generateColors(1))[0];
     const HexString =  color.getHexString()
     
        const item = {
          personName,
          HexString:'#'+HexString,
          color,
          cardId,
          idNo,
          personId,
          personSex,
          personType,
          pic:facePic,
          xuanzhong:true
        }
        // 如果是项目列表
        if(this.tabPosition === 'xmry' &&  this.activeCollapseItem.guid === bidId ){
          this.activePersonList.push(item)
          setTimeout(async() => {
            const  arrColor =  this.activePersonList.filter((item)=>item.xuanzhong).map(x=>x.color)
            const guijiList = await this.handleGetGUIAll()
            this.$refs["proView"].handleLineAll(guijiList, arrColor);
         }, 1500);
        }
        if(this.tabPosition ==='gzry'){
          this.listMenu.push(item)
       
          setTimeout(async() => {
            await this.handleGetGUIAllGZRY()
            this.$refs["proView"].handleLine();
        }, 1500);
        }
   
         // 如果是工作人员列表
    },
    // 选中工作人员
   async handleClickCurPerGZRY(item,index){
      item.xuanzhong = !item.xuanzhong
      const  arrColor =  this.listMenu.filter((item)=>item.xuanzhong).map(x=>x.color)
      await this.handleGetGUIAllGZRY()
      if(arrColor.length === 0) {
        this.$refs.proView.clearCanvas()
        return 
      }
      if(this.historyButtonDis === '历史'){
        this.trajectoryStatus = true
      }
      if(this.historyButtonDis === '实时'){
        this.$refs["proView"].handleLine();
      }
      
    },
    // 选中项目人员
    async  handleClickCurPer(item, index) {
        item.xuanzhong = !item.xuanzhong
      const  arrColor =  this.activePersonList.filter((item)=>item.xuanzhong).map(x=>x.color)
      const guijiList = await this.handleGetGUIAll()
      if(arrColor.length === 0) {
        this.$refs.proView.clearCanvas()
        return 
      }
      this.$refs["proView"].handleLineAll(guijiList, arrColor);
      if(this.historyButtonDis === '历史'){
        this.trajectoryStatus = true
      }
      if(this.historyButtonDis === '实时'){
        this.$refs["proView"].handleLine();
      }
     
    },
    // 获取项目列表
    async getDvListBidInfo(){
      const {startTime,endTime,search} =  this.form
      const params = {
        startTime,
        endTime,
        "type": "PB",
        "search": ""
      }
        const result = await dvListBidInfo(params)
        if(result.code === 0){
            this.siteDataList = result.data
        }
        return result.data
    },
    // 实时轨迹
    async webSocketTaskFn() {
      const { guid:bidId } = this.activeCollapseItem;
      // const bidId =  '8a7286be92889c9e0192890d1ccf13e7'
      const arr = [ `/ws/witness/track/${bidId}`,]
      const wsUrl = `${process.env.VUE_APP_API}/stomp`; // 初始化地址
      this.$websocket.dispatch("websocket_init", wsUrl);
      arr.forEach(url => {
        if (this.subscribedUrlArr.indexOf(url) === -1) {
          this.$websocket.dispatch("websocket_subscribe", url);
          this.subscribedUrlArr.push(url);
        }
      })
    },
    async webSocketTaskFnGZRY() {
      const url =`/ws/witness/track/public` 
      // const bidId =  '8a7286be92889c9e0192890d1ccf13e7'
      const wsUrl = `${process.env.VUE_APP_API}/stomp`; // 初始化地址
      this.$websocket.dispatch("websocket_init", wsUrl);
        if (this.subscribedUrlArr.indexOf(url) === -1) {
          this.$websocket.dispatch("websocket_subscribe", url);
          this.subscribedUrlArr.push(url);
        }
   
    },
    // 切换楼层
    async handleSelt(val){
      // 十楼  十二楼
      this.$set(this.form,'floorName',val)
      // 切换楼层
      this.$refs['proView'].handleTabsLouceng(val)
      await this.getPeopleList()
      await this.handleGetGUIAllGZRY()
      this.$refs["proView"].handleLine()
      if(this.historyButtonDis === '实时'){
        this.webSocketTaskFnGZRY()
      }
      // this.getPeopleList()
    },
    async handleTabsChange() {
        this.activeCollapseValues = []
        this.$refs.proView.clearCanvas()
        this.resetTime()
        if(this.tabPosition === 'gzry'){
          try{
            await this.getPeopleList()
            await this.handleGetGUIAllGZRY()
            this.$refs["proView"].handleLine()
            this.webSocketTaskFnGZRY()
          }catch{
            
          }
          // 临时代码
            // this.form.startTime = '2024-11-01' + " 00:00:00";
            // this.form.endTime = dayjs().format("YYYY-MM-DD") + " 23:59:59";
       
        }
    },
    //查询工作人员列表
    getPeopleList() {
      return new Promise((resolve, reject) => {
        const { startTime, endTime,floorName } = this.form;
        const params = {
          floorName,
          personIds: [],
          start: startTime,
          end: endTime
        };
        listPersonByTrack(params).then((res) => {
          if (res.code === 0) {
            if(res.data?.length <= 0 ){
              reject(res.msg);
            }
            const colors = this.generateColors(res.data?.length);
            const arrColor = Array.from(colors);
            this.arrColor = arrColor;
             this.listMenu =  res.data.map((el, index) => {
              return {
                ...el,
                color:arrColor[index],
                HexString: "#" + arrColor[index].getHexString(),
                xuanzhong:true
              }
            });
            resolve(res.data);
          } else {
            reject(res.msg);
          }
        });
      });
    },
    // 处理时间
    handTimeChange(val) {
      if (this.form.time.length > 0) {
        this.form.startTime = dayjs(this.form.time[0]).format("YYYY-MM-DD HH:mm:ss");
        this.form.endTime = dayjs(this.form.time[1]).format("YYYY-MM-DD HH:mm:ss");
        this.historyButtonDis = '历史'
      }
    },
    // 获取历史项目 历史工作人员
    async handleSubmit() {
      this.$refs.proView.clearCanvas()
      if(this.subscribedUrlArr.length >0){
        this.$websocket.dispatch("websocket_disconnect")
      }
      this.activeCollapseValues = []
      if(this.tabPosition === 'xmry'){
        // 项目人员
        await this.getDvListBidInfo()
      }
      if(this.tabPosition === 'gzry'){
        // 工作人员
       await this.getPeopleList()
       await this.handleGetGUIAllGZRY()
       this.trajectoryStatus = true
      
      }
     
   

    },
    // 获取实时轨迹
    async handleSubmitCls() {
       this.$refs.proView.clearCanvas()
      const startTime = dayjs().format("YYYY-MM-DD") + " 00:00:00";
      const endTime = dayjs().format("YYYY-MM-DD") + " 23:59:59";
      this.$set(this.form, 'startTime', startTime)
      this.$set(this.form, 'endTime', endTime)
      this.$set(this.form, 'time', [])
      await this.getDvListBidInfo()
      this.historyButtonDis = '实时'
      this.trajectoryStatus = false
      this.activeCollapseValues = []
      if(this.tabPosition === 'gzry'){
         await this.handleGetGUIAllGZRY()
         this.$refs["proView"].handleLine()
         this.webSocketTaskFnGZRY()
      }
    },
    // 获取项目人员轨迹数据
    async handleGetGUIAll() {
      return new Promise(async (resolve, reject) => {
        const { xmguid:projectId, guid:bidId,pbfloorname } = this.activeCollapseItem;
        const arr = ['1010楼十楼','十二楼12楼12层']
        const arrText = ['十楼','十二楼']
        const index =  arr.findIndex(x=>x.includes(pbfloorname))
        const { startTime:start, endTime:end} = this.form
        const  personIds =  this.activePersonList.filter((item)=>item.xuanzhong).map(x=>x.personId)
        const params = {
          projectId,
          bidId,
          personIds: personIds,
          start,
          end,
          floorName:arrText[index]

        };
        dvListTrack(params).then((res) => {
          resolve(res.data )
        });
      });
    },
    // 获取工作人员轨迹数据 -- 选中工作人员
    async handleGetGUIAllGZRY() {
      return new Promise(async (resolve, reject) => { 
        const { startTime:start, endTime:end,floorName } = this.form
        const  personIds =  this.listMenu.filter((item)=>item.xuanzhong).map(x=>x.personId)
        const arrColor =  this.listMenu.filter((item)=>item.xuanzhong).map(x=>x.color)
        const params = {
          projectId:'',
          bidId:'',
          personIds: personIds,
          start,
          floorName,
          end
        };
          
        console.log('params工作人员',params);
        
        dvListTrack(params).then((res) => {
          console.log('获取工作人员轨迹数据',res.data);
          
          this.$refs["proView"].handleLineAll(res.data, arrColor);
          resolve(res.data)
        });
      });
    },

    generateColors(numColors) {
      const getRandomHighlightColor = () => {
        const Color = new THREE.Color();
        const color = Color.clone();
        // 随机生成色相值（0-360）
        // const hue = Math.floor(Math.random() * 360);
        // 亮度设为70%-100%以确保颜色高亮
        const lightness = Math.floor(Math.random() * 31) + 50;
        color.setHSL(Math.random(), 1.0, lightness / 100);
        return color;
      };
      const generatedColors = new Set(); // 使用Set来避免重复
      while (generatedColors.size < numColors) {
        const color = getRandomHighlightColor();
        if (!generatedColors.has(color)) {
          generatedColors.add(color);
        }
      }
      return generatedColors;
    },
    // 重置时间
    resetTime(){
      this.$set(this.form,'startTime',dayjs().format("YYYY-MM-DD") + " 00:00:00")
      this.$set(this.form,'endTime',dayjs().format("YYYY-MM-DD") + " 23:59:59")
      this.$set(this.form,'time',[])
    }
  },
  beforeDestroy() {
    this.subscribedUrlArr.forEach((url) => {
      // 断开ws订阅通道
      this.$websocket.dispatch("websocket_unsubscribe", url);
    });
  }
}
</script>
<style lang="scss">
.el-popover.monitor-yt-popover {
  width: 220px;
  height: 176px;
  padding: 4px;
  font-size: 14px;
  z-index: 2;
  border-radius: 4px;
  background-color: #090d29;
  border-color: #146ebd;
  border: 2px solid #4395ff;
  background: linear-gradient(180deg, #02439e 0%, #00082e 79%, #004e9c 100%);
  box-shadow: inset 0px 0px 39px 0px #024de1;
}
.popover-main {
  color: #fff;
  //  border: 1px solid red;
  div {
    padding: 0 4px;
    height: 30px;

    &:first-child {
      padding-top: 10px;
      height: 50px;
      background: linear-gradient(90deg, #02439e 0%, #00082e 60%, #004e9c 100%);
    }
  }
}
//   .custom-tree-node
.el-icon-video-camera-solid {
  display: block;
  color: red !important;
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}
</style>

<style lang="scss" scoped>
.font16{
  font-size: 16px;
}
#visual {
  width: 100%;
  height: 100vh;
  background: url("../../../../assets/bg.jpg");
  background-size: 100% 100%;
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .visual-app {
    width: 100%;
    height: 100vh;

    //   overflow: hidden;
    header {
      position: relative;
      width: 100%;
      height: 174px;
      .goback{
        position: absolute;
        z-index: 999;
        width: 100px;
        height: 100px;
        color: #fff;
        font-size: 20px;
        top: 10px;
        left: 20px;
      }
      .titleFont {
        font-family: HYYaKuHeiJ; //汉仪雅酷黑简 Regular
        font-size: 34px;
        color: #ffffff;
        line-height: 47px;
        text-align: center;
        font-style: normal;
        height: 64px;
        line-height: 64px;
      }

      .header_button {
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        justify-content: space-between;
        color: #fff;

        // ::v-deep .el-radio-button__inner {
        //   width: 120px;
        // }
      }
    }
    section {
      width: 100%;
      height: calc(100vh - 185px);
      box-sizing: border-box;
      padding: 0px 10px;
      color: #fff;
      display: flex;
      // li {
      //   height: 44px;
      //   background-color: #013a86;
      // }
      .left_menu {
        box-sizing: border-box;
        cursor: pointer;
        width: 365px;
        height: 100%;
        padding: 10px 8px;
        background-image: url("../../../../assets/imgs/dp/底图@2x.png");
        background-size: 100% 100%;
        // background-attachment:fixed;
        .left_menu_div {
          height: 60px;
          padding: 5px 10px;
        }
        .left_menu_tabs {
          position: relative;
          height: 60px;
          line-height: 52px;
          font-size: 18px;
          display: flex;

          span {
            display: inline-block;
            height: 30px;
            line-height: 30px;
          }
          .left_menu_tabs_time {
            position: absolute;
            z-index: 1;
            top: 40px;
            left: 86px;
            width: 450px;
            display: flex;
            align-items: center;
            padding: 8px 0px;
            background: linear-gradient(180deg, #02439e 0%, #00082e 79%, #004e9c 100%);
            box-shadow: inset 0px 0px 39px 0px #024de1;
            border: 2px solid #4395ff;

            // .triangle{
            //    position: absolute;
            //    top: -6px;
            //    left: 100px;
            //    width: 0;
            //    height: 0;
            //    border-left: 0px solid transparent;
            //    border-right: 10px solid transparent;
            //    border-top: 10px solid #4395FF;
            //    transform:rotate(45deg);
            // }
          }
        }
        .left_menu_buttons{
          height: 40px;
          line-height: 40px;
        }
        // .left_menu_first{
        //    height: 34px;
        //    border-radius: 5px;
        //    // margin-left: 0px;
        //    font-size: 14px;
        //    border: 1px solid #4395FF;
        //    background-color: #021a79;
        //    color:#e5e5e5;
        //    display: flex;
        //    justify-content: space-around;
        //    align-items: center;
        //    > div {
        //       height: 100%;
        //       width: 100%;
        //       display: inline-block;
        //       line-height: 34px;
        //       text-align: center;
        //       // background: #fff;
        //       width: 100%;
        //       &:last-child{
        //          // border-left: 1px solid #e5e5e5;
        //       }
        //       &.activeDiv{
        //         background-color: #1890ff;
        //       }
        //    }

        // }
        .left_menu_ul {
          height: calc(100vh - 340px);
          li {
            vertical-align: top;
            display: inline-block;
            box-sizing: border-box;
            list-style: none;
            height: 200px;
            width: 140px;
            background-image: url("../../../../assets/imgs/dp/头像未选中背景@2x.png");
            background-size: 100% 100%;
            margin: 10px 10px;
            // border: 1px solid red;
            color: #fff;
            // border: 1px solid red;
            .cirBiao {
              width: 14px;
              height: 14px;
              border-radius: 10px;
              position: absolute;
              bottom: 0px;
              right: 30px;
            }
            
            &.activePer {
              background-image: url("../../../../assets/imgs/dp/头像选中背景@2x.png");
            }
            & > div:nth-child(1) {
              height: 44px;
              line-height: 58px;
              text-align: center;
           
            }
            & > div:nth-child(2) {
              width: 88px;
              height: 98px;
              padding-left: 28px;
            }
            & > div:nth-child(3) {
              text-align: center;
              height: 40px;
              p {
                margin: 0;
              }
            }
          }
         

          ::v-deep .el-collapse {
            border:none;

            .el-collapse-item {
              border: 1px solid #002f6d;
              .el-collapse-item__header {
                background-color: #013a86;
               border-bottom: none;
                display: flex;
                // margin-bottom: 6px;
                height: 44px;
                font-size: 16px;
                line-height: 44px;
                color: #fff !important;
 
              }
              .el-collapse-item__wrap{
                border: none;
              }
              .el-collapse-item__content {
                background-color: #002f6d;
                border-top: 1px solid #013A86;
                padding-bottom:0px;
                // border-bottom: 1px solid #013A86 !important;
                // border: 1px solid red;
              }
            }
          }

          .site {
            display: flex;
            margin-bottom: 6px;
            height: 44px;
            font-size: 16px;
            line-height: 44px;
            border: 1px solid #013A86;

            >span:first-child {
              width: 60px;
              text-align: center;

            }

            >span:nth-child(2) {
              display: inline-block;
              width: 250px;
            }

            .text-overflow {
              white-space: nowrap;
              /* 不换行 */
              overflow: hidden;
              /* 隐藏超出的内容 */
              text-overflow: ellipsis;
              /* 用省略号表示被隐藏的部分 */
              max-width: 280px;
              /* 设置最大宽度以限制文本的显示长度 */
            }
          }
        }

        //列表
        .triangle {
          position: absolute;
          top: -6px;
          left: 100px;
          width: 0;
          height: 0;
          border-left: 0px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid #4395ff;
          transform: rotate(45deg);
        }
        .popoverli {
          display: flex;
          margin-bottom: 6px;
          height: 44px;
          font-size: 16px;
          line-height: 44px;
          border: 1px solid #013a86;
          > span:first-child {
            width: 60px;
            text-align: center;
          }
          > span:nth-child(2) {
            display: inline-block;
            width: 420px;
          }
          .text-overflow {
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏超出的内容 */
            text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
            max-width: 280px; /* 设置最大宽度以限制文本的显示长度 */
          }
        }
        .activeli {
          border: 1px dashed #fff;
          background-color: #0a6acf;
        }
      }
      main {
        width: 100%;
        height: 100%;
        margin-left: 20px;
        margin-right: 20px;
        // border: 1px solid red;
        // background-image:url("../../../../assets/imgs/dp/监控背景底@2x.png");
        background-size: 100% 100%;
        // background-attachment:fixed;
        .main_top {
          height: 76px;
          line-height: 76px;
          text-align: center;
          .triangle {
            display: inline-block;
            width: 0;
            height: 0;
            margin-top: 20px;
            margin-left: 14px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 8px solid #fff;
          }
        }
      }
    }
  }
}
//  图标样式
.iconfontSvg {
  width: 28px;
  height: 28px;
  fill: #fff;
  margin-left: 10px;
}
.iconfontSvg.active {
  fill: #0984ff !important;
}

//  element-ui
::v-deep .el-tabs--bottom,
.el-tabs--top {
  height: 30px;
}
::v-deep .el-radio-button__inner {
  width: 182px;
  height: 38px;
  padding: 0px;
  line-height: 36px;
  background: #013a86;
  border-radius: 0px 5px 5px 0px;
  border: 1px solid #1984f7;
  color: #fff;
  font-size: 18px;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-left: 1px solid #1984f7;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  font-weight: bold;
}
//  form表单
::v-deep .el-form {
  // border: 1px solid red;
  color: #fff;
}
::v-deep .el-form-item__label {
  color: #fff;
}
//  时间框
::v-deep .el-range-input {
  background-color: #0c4f97;
  color: #fff;
}
::v-deep .el-range-editor.el-input__inner {
  background-color: #0c4f97;
  border: 1px solid #4395ff;
  color: #fff;
}
::v-deep .el-range-separator {
  color: #acacac;
  margin-top: -2px;
  // font-size: 14px;
}

// 输入框
::v-deep .el-input.el-input--mini .el-input__inner {
  background-color: #0c4f97;
  border: 1px solid #4395ff;
  color: #fff;
}
.jfbutton {
  margin-top: 10px;
  background-color: #4395ff;
  color: #fff;
  border: 2px solid #4395ff;
  border-radius: 2px;
}

//  tree 输入框

// ::v-deep .el-tree-node__expand-icon {
//    color:#7d8181;
// }
// ::v-deep .el-tree-node__expand-icon.is-leaf {
//    color: transparent !important;
//    cursor: default;
// }
</style>

